<template>
  <el-dialog
    :visible.sync="modal"
    :title="ruleForm.id ? '编辑企业' : '添加企业'"
    custom-class="custom-dialog-style"
    width="60%"
  >
      <el-form
        :model="ruleForm"
        style="width: 800px; margin-bottom: 60px"
        :rules="rules"
        ref="ruleForm"
        label-position="top"
        class="demo-ruleForm"
      >
        <el-form-item label="企业名称" prop="company_name">
          <el-input v-model="ruleForm.company_name" placeholder="请输入企业名称"></el-input>
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="company_code">
          <el-input v-model="ruleForm.company_code" placeholder="请输入统一社会信用代码"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="link_username">
          <el-input v-model="ruleForm.link_username" placeholder="请输入企业联系人"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="link_tel">
          <el-input v-model="ruleForm.link_tel" placeholder="请输入企业联系人电话"></el-input>
        </el-form-item>
        <el-form-item label="账号" :prop="ruleForm.id ? '' : 'account'" v-show="!ruleForm.id">
          <el-input type="account" v-model="ruleForm.account" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" :prop="ruleForm.id ? '' : 'password'" v-show="!ruleForm.id">
          <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item label="企业所在地" prop="address">
          <el-input v-model="ruleForm.address" placeholder="请输入企业所在地"></el-input>
        </el-form-item>
        <el-form-item label="开通域名" prop="has_domain">
          <el-radio v-model="ruleForm.has_domain" :label="1">是</el-radio>
          <el-radio v-model="ruleForm.has_domain" :label="2">否</el-radio>
        </el-form-item>
        <el-form-item label="域名" v-show="ruleForm.has_domain === 1">
          <el-input v-model="ruleForm.domain" placeholder="请输入域名"></el-input>
        </el-form-item>
        <el-form-item label="域名" v-show="ruleForm.has_domain === 1">
          <el-input v-model="ruleForm.subdomain" placeholder="请输入域名"></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="file">
          <el-upload
            class="avatar-uploader"
            action="#"
            :show-file-list="false"
            :on-change="(file) => uploadFile(file, 1)"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <p>{{ruleForm.file}}</p>
        </el-form-item>
      </el-form>
    <div class="footer">
      <el-button type="primary" size="medium" @click="submitForm('ruleForm')">确认</el-button>
      <el-button @click="back">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import request from "@/libs/request";

export default {
  name: 'addEnterprise',
  props: {
  },
  data() {
    return {
      modal: false,
      ruleForm: {
        company_name: '',
        company_code: '',
        link_username: '',
        link_tel: '',
        account: '',
        address: '',
        has_domain: 1,
        domain: '',
        subdomain: '',
        need_password: 1,
        password: '',
        file: '',
        id: '',
        pid: 0,
      },
      rules: {
        company_name: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        company_code: [{ required: true, message: '请输入统一社会信用代码', trigger: 'blur' }],
        link_username: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        link_tel: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }],
        account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        has_domain: [{ required: true, message: '请选择是否开通域名', trigger: 'change' }],
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
  },
  methods: {
    initData() {
      this.ruleForm = {
        company_name: '',
        company_code: '',
        link_username: '',
        link_tel: '',
        address: '',
        account: '',
        has_domain: 1,
        domain: '',
        subdomain: '',
        need_password: 1,
        password: '',
        file: '',
        id: '',
        pid: 0,
      }
      this.$refs['ruleForm'].clearValidate()
    },
    toggle(id = '', pid = '') {
      // 1-编辑 2-添加下级
      this.modal = !this.modal;
      this.initData()
      if (id && !pid) {
        this.ruleForm.id = id;
        this.getInfo()
      } else if (id && pid) {
        this.ruleForm.pid = pid;
      }
    },
    getInfo() {
      let loading = this.$loading()
      request({
        url: 'company/info',
        data: {id: this.ruleForm.id},
        method: 'post'
      }).then(res => {
        this.ruleForm = res.data.data
        loading.close()
      }).catch(err => {
        this.$message.error(err.msg)
        loading.close()
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let loading = this.$loading()
          if (this.ruleForm.id) {
            this.ruleForm.need_password = 2
          }
          request({
            url: 'company/save',
            data: this.ruleForm,
            method: 'post',
          }).then((res) => {
            this.$message.success('操作成功')
            setTimeout(() => {
              this.modal = false
              this.$parent.search()
            }, 500)
            loading.close()
          }).catch((err) => {
            this.$message.error(err.msg)
            loading.close()
          })
        } else {
          // this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    uploadFile(file, type) {
      if (type == 1) {
        let load = this.$loading()
        let formData = new FormData()
        formData.append('file', file.raw)
        request.post('teacher/upload', formData, {
          file:true
        }).then(res => {
          load.close()
          this.ruleForm.file = res.data.url
        }).catch(err => {
          load.close()
        })
        this.ruleForm.file = file.name;
      }
    },
    back() {
      this.modal = false
    },
  },
};
</script>

<style scoped>
.demo-ruleForm /deep/ .el-form-item__label {
  line-height: 14px;
}

.flex {
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 120px;
  height: 140px;
  display: flex;
  align-items: center;
}

.avatar-uploader /deep/ .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  line-height: 140px;
  text-align: center;
}

.avatar {
  width: 100%;
  display: block;
}

.footer {
  text-align: center;
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e6e6e6;
}
</style>
<style>
.custom-dialog-style .el-dialog__body {
  height: 70vh;
}
</style>
